import React, { Component } from 'react';
import { inject, observer } from 'mobx-react'

@inject('data')
@observer
class AppleList extends Component {
    render() {
      /**
       * pluckAppleList 已经采摘的苹果列表
       * eatApple 吃掉苹果事件，将当前苹果纳入已吃苹果列表中
       */
      const { pluckAppleList, eatApple } = this.props.data
      // 根据当前苹果列表数量来判断是否有苹果
      const styles = {
        display: pluckAppleList.length === 0 ? 'block' : 'none'
      }
      return (
        <div className="appleList">
        {/* 遍历显示已采摘的苹果 */}
        {
          pluckAppleList.map((apple, index) => (
            <div className="appleItem" key={ apple.id }>
                <div className="apple"><img src='./apple.png' alt=""/></div>
                <div className="info">
                    <div className="name">红苹果 - { apple.id }号</div>
                    <div className="weight">{ apple.weight }克</div>
                </div>
                <div className="btn-div">
                    {/* 为按钮注册点击事件，点击后触发 eatApple 事件 */}
                    <button onClick={() => eatApple(index)}> 吃掉 </button>
                </div>
            </div>
          ))
        }
        {/* 如果没有苹果则显示 */}
        <div className="empty-tip" key="empty" style={styles}>
          苹果篮子空空如也
        </div>
        </div>
      )
    }
}
  
export default AppleList;